<template>
	<div id="appraise">
		<div class="navBar">
			<uni-icons type="back" size="14" color="#fff" id="icon" @tap="goBack()"></uni-icons>
			<span class="title"></span>
		</div>	
		<span style="color: #A18090;font-size: 24rpx;margin-left: 40rpx;">当前项-德</span>
		<view class="textBar">
			<textarea name="" id="" placeholder="请输入评语" textarea=true cols="30" auto-height=true rows="10" maxlength=400
				@blur="getText" v-model="text"></textarea>
			<uni-file-picker class="upload" disable-preview:true v-model="imageValue" fileMediatype="image" mode="grid"
				@select="select" @progress="progress" @success="success" @fail="fail" id="filePicker" />
		</view>
		<span class="add" @tap="addShortcut()">添加快捷语</span>
		<span style="color: #A18090; font-size: 24rpx;margin-left: 250rpx;">当前选中人数：58人</span>
		<div>
			<ul class="ulBox">
				<li :data-text="item.text" v-for="(item,index) in textList" :key="index" @tap="copy($event)">
					{{item.text}}<span :data-index="index" @tap.stop="del($event)">x</span></li>
			</ul>
		</div>
		<view class="bottom">
			<view class="number">
				<view class="del" @tap.stop="delNum">-</view>
				<view class="num">{{num}}分</view>
				<view class="ad" @tap="addNum">+</view>
			</view>
			<view class="submit" @tap="open()">
				提交</view>
		</view>


		<uni-popup ref="addShortcut" type="center">
			<div style="width: 700rpx; height:auto;background-color: #fff;font-size: 28rpx;margin: auto;border-radius: 30rpx;overflow: hidden;">
			<view style="font-size: 24rpx;margin-left: 30rpx;padding-top: 30rpx;color: #A18090;padding-bottom: 40rpx; text-align: center;">请输入添加内容</view>
			<input class="uni-input" focus style="border: 1px solid #EEEEEE; width: 80%;margin: auto;height: 80rpx;"/>
			<view style="width: 100%; box-sizing: border-box;border: 1px solid #EEEEEE;text-align: center;margin: auto;height: 80rpx;margin-top:30rpx;line-height: 80rpx;color: #1890FF" @tap="submitShortcut">确定添加</view>
			</div>
		</uni-popup>

	</div>

</template>

<script>
	export default {
		data() {
			return {
				imageValue: [],
				files: [],
				num: 1,
				text: "",
				textList: [{
						text: "该学生"
					},
					{
						text: "近期表现"
					},
					{
						text: "良好"
					},
					{
						text: "很差"
					},
					{
						text: "非常不错"
					},
					{
						text: "十分不错"
					}
				]

			};
		},
		methods: {
			addShortcut() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.addShortcut.open('center')
			},
			select(e) {
				console.log('选择文件：', e)
				this.files = e.tempFiles
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},
			goHome() {
				uni.navigateTo({
					url: '/pages/home/index'
				});
			},
			// 上传成功
			success(e) {
				console.log('上传成功')
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('center')
			},
			getText(e) {
				this.text = e.detail.value
				console.log(this.text);
			},
			copy(e) {
				console.log(e.currentTarget.dataset.text);
				this.text = this.text + e.currentTarget.dataset.text;
				console.log(this.text);
			},
			del(e) {
				console.log(e.currentTarget.dataset.index);
				let index = this.textList[e.currentTarget.dataset.index]
				this.textList.splice(index, 1)
			},
			delNum() {
				this.num = this.num - 1
			},
			goBack(){
				uni.navigateBack({
				    delta: 1
				})
			},
			addNum() {
				this.num++
			}
		}
	}
</script>

<style>
	body{
		background-color: #F1F4F8;
	}
	.navBar {
		height: 72rpx;
		background: #49C595;
		padding-top: 84rpx;
		position: relative;
	}

	.navBar>span {
		margin: auto;
	}

	#icon {
		margin-left: 69rpx;
		font-size: 18px;
	}

	.title {
		color: #FFF;
		position: absolute;
		left: 50%;
		transform: translate(-50%)
	}

	.textBar {
		width: 686rpx;
		border-radius: 20rpx;
		margin: auto;
		margin-top: 10rpx;
		background-color: #FFF;
		margin-bottom: 32rpx;
		font-size: 28rpx;
		padding-bottom: 20rpx;
	}

	#appraise {
		background-color: #F1F4F8;
		padding-bottom: 90rpx;
	}

	.textBar>textarea {
		padding: 18rpx;
		width: 650rpx;
		font-size: 28rpx;
		height: 200rpx !important
	}

	.upload {
		display: inline-block;
		width: 200rpx;
		height: 200rpx;
		margin: 16rpx;
		border: 1px dashed #A6A6A6;
		position: relative;
		margin-left: 16rpx;
	}

	.add {
		display: inline-block;
		width: 200rpx;
		height: 48rpx;
		text-align: center;
		margin-left: 48rpx;
		color: white;
		background-color: #1890FF;
		border-radius: 30rpx;
		font-size: 32rpx;
		line-height: 48rpx;
	}

	.ulBox {
		padding: 0 48rpx 0 48rpx;
		margin-top: 32rpx;
		height: auto;
		display: inline-block;
		justify-content: space-around;
		margin-bottom: 140rpx;
	}

	.ulBox>li {
		width: 536rpx;
		padding: 0 30rpx 0 30rpx;
		margin-bottom: 15rpx;
		height: 68rpx;
		border-radius: 67px;
		color: #CCCCCC;
		background-color: #fff;
		font-size: 32rpx;
		line-height: 68rpx;
	}

	.ulBox>li>span {
		float: right;
	}

	.bottom {
		margin-top: 40rpx;
		padding: 0 48rpx 0 48rpx;
		height: 48rpx;
		line-height: 48rpx;
		display: flex;
		justify-content: space-between;
	}

	.number {
		width: 340rpx;
		display: inline-block;
		display: flex;
		text-align: center;
		font-size: 28rpx;
		line-height: 80rpx;
	}

	.submit {
		width: 110rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 10px;
		text-align: center;
		background: #1890FF;
		color: white;
		font-size: 32rpx;
	}

	.del {
		display: inline-block;
		width: 80rpx;
		height: 80rpx;
		background-color: #E5E5E5;
	}

	.ad {
		display: inline-block;
		width: 80rpx;
		height: 80rpx;
		background-color: #E5E5E5;
	}

	.num {
		width: 100rpx;
		height: 80rpx;
		background-color: #fff;
	}
</style>